<template>
    <div class="consultation">
        <BoxWithTitle title="目录" icon="&#xe6f2;" class="menu-wrapper">
            <treeMenu :treeData="menuList" name="treeName" ref="treeMenu" isRightMenu isVideo :isEditMenu="false" @videoMenuPlay="videoMenuPlay"
            @videoMenuSet="videoMenuSet"/>
        </BoxWithTitle>
        <div class="right-view-wrapper">
            <div v-if="activeIcon == 1" class="cell-player">
                <div style="height:100%;width:100%" 
                v-for="(item,i) in selectedVideo" :key="item.index"  
                :class="activeVideoWin == item.index ? 'activeVideoWin': ''"
                @click="handleChangeVideoWin(item.index)" @dblclick="handleCancelVideo(item.index)">
                    <img :src="item.img" v-if="item.img && item.index == i" style="height:100%;width:100%"/>
                </div>
            </div>
            <div v-if="activeIcon == 4" class="cell-player">
                <div style="height:50%;width:50%" 
                v-for="(item,i) in selectedVideo" :key="item.index"  
                :class="activeVideoWin == item.index ? 'activeVideoWin': ''"
                @click="handleChangeVideoWin(item.index)"
                @dblclick="handleCancelVideo(item.index)">
                    <img :src="item.img" v-if="item.img && item.index == i" style="height:100%;width:100%"/>
                </div>
            </div>
            <div v-if="activeIcon == 9" class="cell-player">
                <div style="height:33.33%;width:33.33%" 
                v-for="(item,i) in selectedVideo" :key="item.index" 
                :class="activeVideoWin == item.index ? 'activeVideoWin': ''"
                @click="handleChangeVideoWin(item.index)"
                @dblclick="handleCancelVideo(item.index)">
                    <img :src="item.img" v-if="item.img && item.index == i" style="height:100%;width:100%"/>
                </div>
            </div>
            <div v-if="activeIcon == 16" class="cell-player">
                <div style="height:25%;width:25%" 
                v-for="(item,i) in selectedVideo" :key="item.index" 
                :class="activeVideoWin == item.index ? 'activeVideoWin': ''"
                @click="handleChangeVideoWin(item.index)"
                @dblclick="handleCancelVideo(item.index)">
                    <img :src="item.img" v-if="item.img && item.index == i" style="height:100%;width:100%"/>
                </div>
            </div>
            <div class="btn-icon-group">
                <i class="iconfont" :class="activeIcon === 1 ? 'activeIcon' : ''" @click="handleChangeIcon(1)">&#xe643;</i>
                <i class="iconfont" :class="activeIcon === 4 ? 'activeIcon' : ''" @click="handleChangeIcon(4)">&#xe646;</i>
                <i class="iconfont" :class="activeIcon === 9 ? 'activeIcon' : ''" @click="handleChangeIcon(9)">&#xe641;</i>
                <i class="iconfont" :class="activeIcon === 16 ? 'activeIcon' : ''" @click="handleChangeIcon(16)" style="font-size: 20px;">&#xe92b;</i>
                <i class="tips">双击画面可取消播放</i>
            </div>
        </div>
    </div>
</template>
<script>
import BoxWithTitle from '@/components/base/BoxWithTitle.vue'
import treeMenu from '@/components/base/treeMenu.vue'
import bus from '@/utils/eventBus.js';
import {videoTreeList,getVidepJpgByIDs} from '@/api/https'
export default ({
    name:'consultation',
    components:{BoxWithTitle,treeMenu},
    data() {
        return{
            stationId:sessionStorage.getItem("stationId"),
            menuList:[],
            treeID:null,
            selectedVideo:[],
            activeIcon:1,
            activeVideoWin:0,
            timer:null,
        }
    },
    mounted(){
        this.initBasin()
        this.clearVideo()
        this.onGetMenuList()
    },
    activated(){
        this.initBasin()
        const newStationId = sessionStorage.getItem("stationId");
        if (this.stationId != newStationId) {
            this.stationId = newStationId;
            this.clearData()
            this.onGetMenuList()
        }
    },
    deactivated(){
       bus.$off('station-changed', this.handleStationChanged);
       this.clearVideo()
       if(this.timer){
            clearInterval(this.timer)
            this.timer = null
        }
    },
    beforeDestroy(){
        bus.$off('station-changed', this.handleStationChanged);
        this.clearVideo()
        if(this.timer){
            clearInterval(this.timer)
            this.timer = null
        }
    },
    methods:{
        initBasin() {
            bus.$emit('showBasin', true);
            bus.$off('station-changed', this.handleStationChanged);
            bus.$on('station-changed', this.handleStationChanged);
        },
        handleStationChanged(newStationId, targetRoute) {
            if (!targetRoute || targetRoute === this.$route.name) {
                this.stationId = newStationId;
                this.clearData()
                this.onGetMenuList()
            }
        },
        clearData(){
            this.clearVideo()
            this.treeID = null
            this.selectedVideo = []
            this.activeIcon = 1
            this.activeVideoWin = 0
            this.menuList = []
        },
        onGetMenuList(){
            videoTreeList({
                STATION_ID:this.stationId
            }).then(res=>{
                if(res.isSuccess){
                    this.menuList = res.data
                   if(res.data.length > 0){
                        this.findLeafNodes(this.menuList);
                        this.$nextTick(()=>{
                            this.$refs.treeMenu.$refs.tree.setCurrentKey(this.treeID);
                            this.handleChangeIcon(1)
                        })
                   }
                }
            })
        },
        findLeafNodes(data) {
            if (data[0].children == null || data[0].children.length === 0){
                this.treeID = data[0].id
                return
            }else{
                this.findLeafNodes(data[0].children);
            }
        },

        handleChangeIcon(num){
            this.activeIcon = num
            this.activeVideoWin = 0
            this.selectedVideo = this.videoList.slice(0,num)
        },
        handleChangeVideoWin(num){
            this.activeVideoWin = num
        },
        handleCancelVideo(num){
            this.videoList[num] = {
                id:'',
                img:'',
                index:num
            }
            const list = [...this.selectedVideo]
            const data = {...list[num]}
            data.id = ''
            data.img = ''
            list[num] = {...data}
            this.selectedVideo = [...list]
        },
        clearVideo(){
            this.videoList = []
            for(let i=0; i<16; i++){
                this.videoList.push({
                    id:'',
                    index:i,
                    img:''
                })
            }
        },
        videoMenuPlay(data){
            const _d = this.videoList[this.activeVideoWin]
            const find = this.videoList.findIndex(item=>{return item.id == data.id})
            if(find > -1){
                this.$message.error(`当前视频已在第${find + 1}个窗口播放，无法重复播放！`)
            }else{
                _d.id = data.id
                _d.index = this.activeVideoWin
                this.onVideoList()
            }

            if(!this.timer){
                this.timer = setInterval(()=>{
                    this.onVideoList()
                },10000)
            }
        },
        onVideoList(){
            if(this.videoList.length > 0 ){
                const list= []
                this.videoList.forEach(item=>{
                    if(item.id){
                        list.push({
                            id:item.id,
                            index:item.index,
                        })
                    }
                })
                getVidepJpgByIDs(list).then(res=>{
                    if(res.isSuccess && res.data && res.data.length > 0){
                        const _list = []
                        this.selectedVideo.forEach((item,i)=>{
                            const _d = res.data.filter(sub=>{return sub.index == item.index})
                            if(_d.length > 0){
                                item = {..._d[0]}
                            }
                            _list.push(item)
                            this.videoList[i] = {...item}
                        })
                        this.selectedVideo = [..._list]
                    }else{
                        this.videoList[this.activeVideoWin] = {
                            id:'',
                            index:this.activeVideoWin,
                            img:''
                        }
                        this.selectedVideo[this.activeVideoWin] = {
                            id:'',
                            index:this.activeVideoWin,
                            img:''
                        }
                        if(this.timer){
                            clearInterval(this.timer)
                            this.timer = null
                        }
                    }
                })
            }else{
                if(this.timer){
                    clearInterval(this.timer)
                    this.timer = null
                }
            }
        },
        videoMenuSet(data){
            window.open(`/video.html?id=${data.channel}`, '流查看', 'height=700,width=900,top=100,left=900');
        },
    }
})
</script>
<style scoped lang="scss">
.consultation{
    display: flex;
    flex-direction: row;
    justify-content: start;
    .menu-wrapper{
        width:340px;
        height: calc(100vh -  120px);
    }
    .right-view-wrapper{
      flex:1;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
    }
}
.right-video{
    width: 100%;
    height: calc(100vh -  120px);
    display: flex;
    flex-direction: row;
    justify-content: start;
}
.cell-player {
    width:100%;
    height: calc(100vh - 170px); 
    display: flex;
    flex-wrap: wrap;
    div{
        background: #000;
        border:1px solid #333;
    }
    .activeVideoWin{
        border:1px solid #e7a519;
    }
}
.btn-icon-group{
 width: 100%;
 height: 50px;
 background: #333;
 display: flex;
 flex-direction: row;
 justify-content: start;
 align-items: center;
 padding:0 20px;
 box-sizing: border-box;
 i{
    color:#fff;
    margin:0 6px;
    padding:4px;
    &:hover{
        cursor: pointer;
    }
 }   
 .activeIcon{
    border:1px solid #fff;
 }
}
.tips{
    font-style: normal;
    font-size: 12px;
}
.graph{
    width: 100%;
    height: calc(100vh - 200px);
    display: flex;
    flex-direction: row;
    justify-content: start;
}
</style>
